<template>
  <el-card>
    <div class="list-h">
      <div>
        <el-button
          v-auth="`funds-non-project-add`"
          type="primary"
          class="add-option"
          @click="handleAdd"
          >新增</el-button
        >
        <el-button
          v-auth="`funds-non-project-export`"
          type="primary"
          class="add-option"
          @click="handleExport"
          >导出</el-button
        >
      </div>
    </div>

    <el-table :data="state.tableData" style="width: 100%" align="center">
      <template #empty>
        <el-empty :image-size="150" description="暂无数据"></el-empty>
      </template>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column
        prop="happenItem"
        label="事项"
        min-width="150"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="date"
        label="事项发生时间"
        min-width="100"
        align="center"
      >
        <template #default="{ row }">
          {{ row.happenTimeYear }} - {{ row.happenTimeMonth }}
        </template>
      </el-table-column>

      <el-table-column
        prop="createUserName"
        label="填报人"
        width="120"
        align="center"
      />
      <el-table-column
        prop="createUserDept"
        label="填报人所在单位"
        min-width="120"
        align="center"
      />
      <el-table-column
        prop="createTime"
        label="填报时间"
        width="120"
        align="center"
      />
      <el-table-column label="总经费" align="center">
        <el-table-column
          prop="fundsSourceSum"
          label="经费总额"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="fundsSourceGov"
          label="政府资金"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="fundsSourceCompany"
          label="企业自筹"
          min-width="80"
          align="center"
        />
        <el-table-column
          prop="fundsSourceOther"
          label="其他支出"
          min-width="80"
          align="center"
        />
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <!-- <el-button type="text" @click="handleLook">查看</el-button> -->
          <el-button
            v-auth="`funds-non-project-edit`"
            type="text"
            @click="handleEdit(row)"
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除该条记录吗？"
            @confirm="handleDelete(row)"
          >
            <template #reference>
              <el-button v-auth="`funds-non-project-del`" type="text"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <re-pagination
      :total="total"
      v-show="total > 0"
      v-model:page="formInline.pageNum"
      v-model:limit="formInline.pageSize"
      @pagination="handleSearch"
    />
  </el-card>

  <el-dialog
    :title="mode === 'add' ? '添加经费' : '编辑经费'"
    v-model="dialogFormVisible"
    destroy-on-close
    width="45vw"
  >
    <AddNonProjectFundsDialog
      :mode="mode"
      :info="state.info"
      @emitSubmit="onEmitSubmit"
    />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import AddNonProjectFundsDialog from "./components/AddNonProjectFundsDialog.vue";
import { delFeeOtherSpend, getFeeOtherSpendList } from "/@/api/funds";
// import { getFeeSpendList } from "/@/api/funds";
import { postDownload } from "/@/utils/download";
import NotifMessage from "/@/utils/message/notification";

let loading = ref<boolean>(false);

let dialogFormVisible = ref<boolean>(false);

let total = ref<number>(0);

let mode = ref<string>("add");

let formInline = reactive({
  pageSize: 10,
  pageNum: 1
});

let state = reactive({
  tableData: [],
  info: {}
});

// 请求列表表格数据
async function getTableData(obj: object = {}) {
  loading.value = true;
  try {
    const { code, data } = await getFeeOtherSpendList(obj);
    if (code === 200) {
      state.tableData = data.list;
      total.value = data.rows;
    }
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
}

// 根据条件进行搜索
const handleSearch = (): void => {
  getTableData(formInline);
};
const handleDelete = async row => {
  const { code, message } = await delFeeOtherSpend(row.id);
  if (code === 200) {
    NotifMessage.success(`${message}`);
    getTableData(Object.assign(formInline, { pageNum: 1 }));
  } else {
    NotifMessage.error(`${message}`);
  }
};

// 打开弹窗
const handleAdd = (): void => {
  dialogFormVisible.value = true;
};

// // 打开弹窗
// const handleLook = (row): void => {
//   dialogFormVisible.value = true;
//   mode.value = "look";
//   state.info = row;
// };

// 打开弹窗
const handleEdit = (row): void => {
  dialogFormVisible.value = true;
  mode.value = "edit";
  state.info = row;
};

// 操作
const onEmitSubmit = (isSubmit: boolean) => {
  dialogFormVisible.value = false;
  if (isSubmit) {
    getTableData(Object.assign(formInline, { pageNum: 1 }));
  }
};

const handleExport = async () => {
  await postDownload(
    `/rdms-admin/RdFeeOtherSpend/export`,
    `科研非项目经费导出.xlsx`,
    formInline
  );
};

getTableData(formInline);
</script>

<style lang="scss" scoped>
.right-btn {
  float: right;
}
</style>
